<template>
    <div class="nav-class-right">
        <div class="cate_channel active">
            <div class="list-class-left">
                <ul>
                    <li v-for="(child, child_index) in productList" :key="child_index">
                        <a :title="child.title" @click="navigaionTwoClick(child,child_index)">{{ child.title }}</a>
                        <a :title="child_child.title" @click="navigaionThreeClick(child_child,child)" v-for="(child_child, child_child_index) in child['children']" :key="child_child_index">{{ child_child.title }}</a>
                    </li>
                </ul>
                <div class="every_class"> <a href="#" rel="nofollow">查看全部分类</a> </div>
            </div>
            <div>
                <a class="nav-adv-img" href="#"><img src="https://static.3d66.com/www3/src/assets/images/nav/3d.png"
                        alt="导航右侧分类图片"></a>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import router from '../router'
import { useNavConfig } from '../stores/navConfig'
const navConfig = useNavConfig()
const props = defineProps(['productList','parentIndex','allList']);
const navigaionTwoClick = (item:string[],child_index:number) =>{

    //点击二级的时候找一级菜单
    navConfig.dataFill(props.allList)
    navConfig.setTwoNav(item)
    navConfig.setIndex(child_index)
    navConfig.setClickGrade(2);
    navConfig.removeThree() //清空3级
    router.push({name:'/product'})
}
const navigaionThreeClick = (item:string[],twoChild:string[]) =>{
    //设置1一级
    navConfig.dataFill(props.allList)
    //设置二级
    navConfig.setTwoNav(twoChild)
    //设置3级
    navConfig.setThreeNav(item)
    navConfig.setClickGrade(3);
    router.push({name:'/product'})
}
</script>